<script setup lang="ts">
import { reactive, computed } from 'vue'
import {
  ElButton,
  ElForm,
  ElRow,
  ElInput,
  ElInputNumber,
  ElSwitch,
  ElSelect,
  ElOption
} from 'element-plus'
// import dayjs from 'dayjs'
import { useRouter, useRoute } from 'vue-router'
import { createRoomsApi, updateRoomsApi, getRoomsDetailApi } from '@/api/room'
import { getRoomTypesListApi } from '@/api/room-type'
import { getRoomFloorsListApi } from '@/api/room-floor'
import { getRoomFeaturesListApi } from '@/api/room-feature'
import { Room } from '@/api/room/types'
import { RoomType } from '@/api/room-type/types'
import { RoomFloor } from '@/api/room-floor/types'
import { RoomFeature } from '@/api/room-feature/types'
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { FormItem } from '@/components/Form'
import { useValidator } from '@/hooks/web/useValidator'
import { useCreate } from '@/hooks/web/useCreate'
import { onMounted } from 'vue'
import { ref } from 'vue'

const { push } = useRouter()

const { required } = useValidator()

const back = () => {
  push('/settings/room')
}

const instance: Room = reactive(new Room())
const roomTypes = ref<RoomType[]>([])
const roomFloors = ref<RoomFloor[]>([])
const roomFeatures = ref<RoomFeature[]>([])
const route = useRoute()

const { elFormRef, openMode, save, loading } = useCreate({
  instance,
  route,
  afterSave: back,
  createApi: createRoomsApi,
  updateApi: updateRoomsApi
})

const rules = reactive({
  code: [required('请填写房号')]
})

const title = computed(() => {
  return openMode.value === 'CREATE' ? '添加房间号码' : '编辑房间号码'
})

const getRoomTypes = async () => {
  const { data } = await getRoomTypesListApi({ order: 'sequence' })
  roomTypes.value = data.rows
}

const getRoomFloors = async () => {
  const { data } = await getRoomFloorsListApi({ order: 'sequence' })
  roomFloors.value = data.rows
}

const getRoomFeatures = async () => {
  const { data } = await getRoomFeaturesListApi({ order: 'sequence' })
  roomFeatures.value = data.rows
}

getRoomTypes()
getRoomFloors()
getRoomFeatures()

onMounted(async () => {
  if (openMode.value === 'UPDATE') {
    const { data } = await getRoomsDetailApi(route.params.id as string)
    instance.init(data)
  }
})
</script>

<template>
  <ContentDetailWrap :title="title" @back="back">
    <template #right>
      <ElButton type="primary" :loading="loading" @click="save"> 保存 </ElButton>
    </template>

    <ElForm ref="elFormRef" :model="instance" label-width="100px" :rules="rules">
      <ElRow style="max-width: 450px; margin: 0 auto">
        <FormItem :col-props="{ span: 24 }" label="房号" prop="code">
          <ElInput v-model="instance.code" maxlength="50" :disabled="openMode === 'UPDATE'" />
        </FormItem>

        <FormItem :col-props="{ span: 24 }" label="房型" prop="room_type_id">
          <ElSelect v-model="instance.room_type_id" clearable filterable class="w-full">
            <ElOption
              v-for="item of roomTypes"
              :key="item.id!"
              :label="item.name"
              :value="item.id!"
            />
          </ElSelect>
        </FormItem>

        <FormItem :col-props="{ span: 24 }" label="楼层" prop="room_floor_id">
          <ElSelect v-model="instance.room_floor_id" clearable filterable class="w-full">
            <ElOption
              v-for="item of roomFloors"
              :key="item.id!"
              :label="item.name"
              :value="item.id!"
            />
          </ElSelect>
        </FormItem>

        <FormItem :col-props="{ span: 24 }" label="房间特征" prop="room_feature_ids">
          <ElSelect
            v-model="instance.room_feature_ids"
            multiple
            clearable
            filterable
            class="w-full"
          >
            <ElOption
              v-for="item of roomFeatures"
              :key="item.id!"
              :label="item.name"
              :value="item.id!"
            />
          </ElSelect>
        </FormItem>

        <FormItem :col-props="{ span: 24 }" label-width="100px" prop="selectable">
          <ElSwitch v-model="instance.selectable" active-text="允许自助选房" />
        </FormItem>

        <FormItem :col-props="{ span: 24 }" label-width="100px" prop="disabled">
          <ElSwitch v-model="instance.disabled" active-text="禁用" />
        </FormItem>

        <FormItem :col-props="{ span: 24 }" label="序号" prop="sequence">
          <ElInputNumber v-model="instance.sequence" controls-position="right" :min="1" />
        </FormItem>
      </ElRow>
    </ElForm>
  </ContentDetailWrap>
</template>
